<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
<div id="root">
<!--  将data中的文本数据插入到HTML中可通过Mustache语法-->
  <h2>Hello,{{message}}!</h2>
  <!-- 左边的变量和右边的变量相加 -->
  <h2>{{firstName + lastName}}</h2>
  <!-- Mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 -->
  <h2>{{18+2}}</h2>
  <h2>{{firstName + ' ' + lastName}}</h2>
  <!-- 没有意义 -->
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2>
  <!-- 计算属性当成属性来使用，是不用加()的。我们要把fullName1当成一个属性来使用。 -->
  <h2>{{fullName1}}</h2>
  <h2>{{counter * 2}}</h2>
</div>
<script src="../js/vue.js"></script>>
<script>
  const root = new Vue({
    el: '#root',
    data: {
      message: '计算属性具有缓存,methods是没有缓存的',
      firstName: '张',
      lastName: '三',
      counter: 100
    },
    computed: {
      // 这里定义的函数一般不加动词，尽可能使用属性的方式起名
      // 计算属性看起来是函数，本质是属性
      // 计算属性的简写------通常我们使用这种简写形式
      fullName: function () { //这里只是实现了getter方法
        return this.firstName + ' ' + this.lastName;
      },

      // name:'计算属性的setter方法和getter方法'
      // 定义了一个属性fullName1,fullName1类型也是一个对象
      fullName1: {
        //一般情况下，不希望别人给set属性设置值，一般是没有set方法的
        set: function (newValue) { //可以把修改的内容传进来
          // set: function () {
          // 可以删除掉set方法
          console.log('-------', newValue)
          const names = newValue.split(' ')
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get() { //计算属性一般来说只要实现get方法就行了，没有set方法就是只读属性
          return 'abc' + this.firstName + ' ' + this.lastName;
        }
      },

    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>
</html>